import { t } from 'i18next'
import { AllowVoiceIcon, ProhibitVoiceIcon, StyledVolumeWrap } from './style'
import { Modal, Slider } from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import { useTvWallStore } from '../store'
import { FC, useEffect, useState } from 'react'
import { VolumeEntity } from '@/api/manager/tvwall/interface'
import { fetchGetHduVolume, fetchSetHduVolume } from '@/api/manager/tvwall'
export const VolumeModal: FC = () => {
	const { update, meetingMoid, operateBoxInfo, isOpenVolumeModal } = useTvWallStore(
		(state) => ({
			update: state.update,
			meetingMoid: state.meetingMoid,
			operateBoxInfo: state.operateBoxInfo,
			isOpenVolumeModal: state.isOpenVolumeModal,
		}),
		shallow
	)
	const [volumeData, setVolumeData] = useState<VolumeEntity>({ silence: 0, volume: 0 })

	useEffect(() => {
		handleGetHduVolume()
	}, [isOpenVolumeModal])

	const handleGetHduVolume = async () => {
		const _hdu_id = operateBoxInfo?.hdu_id || ''
		if (!_hdu_id) return
		const res = await fetchGetHduVolume(meetingMoid, _hdu_id)
		if (res.success && res.data) {
			setVolumeData({
				silence: res.data?.silence || 0 /**是否静音*/,
				volume: res.data?.volume || 0 /**声音音量*/,
			})
		}
	}
	/**开启声音/禁止声音*/
	const handleOperateVolume = async (type: string) => {
		const _hdu_id = operateBoxInfo?.hdu_id || ''
		if (!_hdu_id) return
		const params = {
			silence: type === 'allow' ? 0 : 1,
			volume: volumeData.volume,
		}
		const res = await fetchSetHduVolume(meetingMoid, _hdu_id, params)
		if (res.success) {
			setVolumeData({
				silence: params.silence /**是否静音*/,
				volume: params.volume /**声音音量*/,
			})
		}
	}
	/**滑块滚动或者点击触发事件 */
	const handleChangeVolume = async (val: number /**点击的音量*/) => {
		const _hdu_id = operateBoxInfo?.hdu_id || ''
		if (!_hdu_id) return
		const params = {
			silence: val === 0 ? 1 : 0,
			volume: val,
		}
		const res = await fetchSetHduVolume(meetingMoid, _hdu_id, params)
		if (res.success) {
			setVolumeData({
				silence: params.silence /**是否静音*/,
				volume: params.volume /**声音音量*/,
			})
		}
	}
	return (
		<Modal
			width={400}
			height={285}
			open={isOpenVolumeModal}
			title={t('音量调节')}
			okText={false}
			cancelText={t('关闭')}
			onCancel={() => {
				update({ isOpenVolumeModal: false })
			}}
		>
			<StyledVolumeWrap>
				<div className="bar_icon">
					<div
						onClick={() => {
							handleOperateVolume('allow')
						}}
					>
						{!!volumeData.silence && <ProhibitVoiceIcon></ProhibitVoiceIcon>}
					</div>
					<div
						onClick={() => {
							handleOperateVolume('prohibit')
						}}
					>
						{!volumeData.silence && <AllowVoiceIcon></AllowVoiceIcon>}
					</div>
				</div>
				<div className="bar_content">
					<Slider
						disabled={!!volumeData.silence}
						max={31}
						value={volumeData.volume}
						onClick={(val) => {
							handleChangeVolume(val)
						}}
						onChange={(val) => {
							handleChangeVolume(val)
						}}
					/>
				</div>
				<div className="bar_tip">{Math.round((volumeData.volume / 31) * 100) + '%'}</div>
			</StyledVolumeWrap>
		</Modal>
	)
}
